import React,{useState,useEffect} from "react";
import * as Public from "./index"
import * as Action from "../../common/Action/index"
import { IconLeft, IconRight } from "@arco-design/web-react/icon";
export function Comment(props){
    let [messageList,setMessageList]:[any[],Function]=useState([])
    useEffect(()=>{
        setMessageList([
            {
                messageID:"mainID",//messageID
                to:"asdasda1",//MessageID
                fromUser:"ABC",//fromUseName
                toUser:"EFG",//toUseName
                messageTime:'2023年9月23日',
                messageContent:'按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算',
                children:[{
                    messageID:"asdasd2",//messageID
                    to:"asdasda1",//MessageID
                    fromUser:"ABC",//fromUseName
                    toUser:"EFG",//toUseName
                    messageTime:'2023年9月23日',
                    messageContent:'按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算'
                },
                {
                    messageID:"asdasd",//messageID
                    to:"asdasd2",//MessageID
                    fromUser:"ABC",//fromUseName
                    toUser:"EFG",//toUseName
                    messageTime:'2023年9月23日',
                    messageContent:'按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算'
                }]
            }]
        )
    },[])
    function submitInput(text,user){
        
        //评论完成
        setMessageList([
            ...messageList,
            {
                messageID:Math.random().toString(32).slice(2,10),//messageID
                to:null,//MessageID
                fromUser:user,//fromUseName
                toUser:'',//toUseName
                messageTime:'2023年9月23日',
                messageContent:text,
                children:[]
            }
        ])
        console.log(messageList)
    }
    
    
    function updateMessage(list,parentMessage){
        //下次进入也不会刷新请求
        if(parentMessage==null){
            setMessageList(list)
        }else{
            let preMessage=messageList
            for(let i=0;i<preMessage.length;i++){
                if(preMessage[i].messageID==parentMessage){
                    setMessageList([
                        ...preMessage.slice(0,i),
                        {
                            ...preMessage[i],
                            children:list,
                        },
                        ...preMessage.slice(i+1)
                    ])  
                }
            }      
                   
        }
    }
    function getMoreMessage(parentMessage){
        if(parentMessage==null){
            setMessageList([
                ...messageList,
                {
                    messageID:"asdasd22",//messageID
                    to:"asdasda13",//MessageID
                    fromUser:"ABasdC",//fromUseName
                    toUser:"EddFG",//toUseName
                    messageTime:'2023年9月23日',
                    messageContent:'按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算',
                    children:[]
                }
            ]
            )
        }else{
            let preMessage=messageList

            for(let i=0;i<preMessage.length;i++){
                if(preMessage[i].messageID==parentMessage){
                    setMessageList([
                        ...preMessage.slice(0,i),
                        {
                            ...preMessage[i],
                            children:[
                                ...preMessage[i].children,
                                {
                                    messageID:"asdasd22",//messageID
                                    to:"asdasda13",//MessageID
                                    fromUser:"ABasdC",//fromUseName
                                    toUser:"EddFG",//toUseName
                                    messageTime:'2023年9月23日',
                                    messageContent:'按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算'
                                }
                            ]
                        },
                        ...preMessage.slice(i+1)
                    ])
                }
            }
        }
        
    }
    let outterBg=props.background || 'var(--bg-2)'
    console.log('outerBg',outterBg)
    return <div
        >
        {props.children || null}
        {/**评论部分 */}
        <div style={{marginTop:'64px',width:'100%',background:outterBg,overflowX:'hidden',...props.style}}>
                <Public.MessageInput style={{backgroundColor:outterBg,...props.style}} submitMessage={submitInput}></Public.MessageInput>
                <div className="messageCount">13条评论</div>
                {
                    messageList.map(messageItem=>{
                        return <Public.Message style={{backgroundColor:outterBg}} key={messageItem.messageID} parentMessage={messageItem.messageID} messageData={messageItem} getMoreMessage={getMoreMessage} updateMessage={updateMessage}></Public.Message>
                    })
                }
            </div>
            {/*<div className="moreMessageButton" onClick={()=>{getMoreMessage(null)}}>显示更多评论</div>*/}
        <div className="pageSelect">
            <div className="page">
                <div className="pageButton" style={{borderRadius:'10px 0 0 10px'}}>
                    <IconLeft style={{marginTop:'0'}}></IconLeft>
                </div>
                <div className="pageButton" style={{background:'rgb(var(--gray-10))',color:'rgb(var(--gray-1))'}}>
                    1
                </div>
                <div className="pageButton">
                    2
                </div>
                <div className="pageButton" >
                    ...
                </div>
                <div className="pageButton">
                    5
                </div>
                <div className="pageButton" style={{borderRadius:'0 10px 10px 0'}}>
                    <IconRight style={{marginTop:'0'}}></IconRight>
                </div>
            </div>
        </div>
        
    </div>
}